<template>
  <!-- 基本信息 -->
  <div>
    <div class="title-wrapper">
      <title-name :title="title"></title-name>
      <a-icon
        v-if="showPlanBoardVisible"
        :type="planBoardVisible ? 'up' : 'down'"
        @click="planBoardVisible = !planBoardVisible"
      />
    </div>
    <div v-if="planBoardVisible">
      <!-- 表单信息 -->
      <custom-form ref="ruleForm" isValidate :rules="!onlyRead ? rules : {}" :formList="formList" :form="form" :editModel="onlyRead ? 'V' : 'E'"
        :isEmit="false">
      </custom-form>
    </div>
    
  </div>
</template>

<script>
  import { riskMonitorPlangetEmoById } from '@/api/quality/risk/monitoringPlan'
export default {
  name: 'a' + Date.now(),
  components: {
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    // 表单
    form: {
      type: Object,
      default: () => ({})
    },
    projectId: {
      type: [String, undefined],
      default: ''
    },
    // 只读模式
    onlyRead: {
      type: Boolean,
      default: () => false
    },
    // 是否显示箭头
    showPlanBoardVisible: {
      type: Boolean,
      default: () => false
    },
    // 默认展开
    defaultPlanBoardVisible: {
      type: Boolean,
      default: () => true
    },
    // 是否显示工程部位 风险名称
    showProjectPosition: {
      type: Boolean,
      default: () => false
    }
  },
  watch: {
    defaultPlanBoardVisible: {
      handler(val) {
        this.planBoardVisible = val
      },
      immediate: true,
      deep: true
    },
    projectId: {
      handler(val) {
        if (val) {
          this.riskMonitorPlangetEmoById()
        }
      },
      immediate: true,
      deep: true
    },
  },
  data() {
    return {
      planBoardVisible: false,
      currentDate: new Date(),
      organizePeopleList: [],
      rules: {
        monitorEndpoint: [{ required: true, whitespace: true, message: '请输入监控停止点', trigger: 'change' }],
        verifierId: [{ required: true, message: '请选择验证人', trigger: 'change' }],
        checkerId: [{ required: true, message: '请选择检查人', trigger: 'change' }],
        takeEffectDate: [{ required: true, whitespace: true, message: '请选择生效日期', trigger: 'change' }],
        timeLimit: [{ required: true, whitespace: true, message: '请选择检查时限', trigger: 'change' }],
        frequency: [{ required: true, message: '请输入检查频率', trigger: 'change' }],
      }
    }
  },
  created() {
  },
  computed: {
    // 表单配置项
    formList() {
      let list = []
      if (this.showProjectPosition) {
        list.push(
          {
          keyName: 'name',
          type: 'a-input',
          label: '风险名称',
          },
        )
        list.push(
          {
          keyName: 'projectPosition',
          type: 'a-input',
          label: '工程部位',
        },
        )
      }
      const arrayOther = [
        {
          keyName: 'monitorEndpoint',
          type: 'a-input',
          label: '监控停止点',
        },
        {
          keyName: this.onlyRead ? 'verifierName' : 'verifierId',
          type: 'a-select',
          label: '验证人',
          data: this.organizePeopleList,
        },
        {
          keyName: this.onlyRead ? 'checkerName' : 'checkerId',
          type: 'a-select',
          label: '检查人',
          data: this.organizePeopleList,
        },
        {
          keyName: 'takeEffectDate',
          type: 'a-date-picker',
          label: '生效日期',
          attrs: {
            valueFormat: 'YYYY-MM-DD',
            disabledDate: (current) => {
              if (this.currentDate) {
                return current && current < this.moment(this.currentDate).startOf('day');
              } else {
                return false
              }
            },
          },
          change: (e) => {
            this.$emit('updateForm', {timeLimit: ''})
          }
        },
        {
          keyName: 'timeLimit',
          type: 'a-date-picker',
          label: '检查时限',
          attrs: {
            valueFormat: 'YYYY-MM-DD',
            disabledDate: (current) => {
              const takeEffectDate = this.form.takeEffectDate
              if (takeEffectDate) {
                return current && current < this.moment(takeEffectDate).startOf('day');
              } else {
                return false
              }
            },
          }
        },
        {
          keyName: 'frequency',
          type: 'a-input',
          label: '检查频率(天/次)',
        },
      ]
      list = list.concat(arrayOther)
      return list
    },
  },
  methods: {
    //获取项目下的人员列表
    riskMonitorPlangetEmoById() {
        if (!this.projectId) return
        this.fetchingOrganizePeopleList = true
        riskMonitorPlangetEmoById(this.projectId).then((res) => {
          this.fetchingOrganizePeopleList = false
          let obj = {}
          res.data = res.data.reduce((cur, next) => {
            obj[next.employeeId] ? '' : (obj[next.employeeId] = true && cur.push(next))
            return cur
          }, []) //设置cur默认类型为数组，并且初始值为空的数组
          this.organizePeopleList = res.data.map(item => {
            item.value = item.employeeId
            item.label = item.employeeName
            return item
          })
        })
      },
  },
}
</script>

<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 18px;
  }
}
</style>